<template>
  <div class="d-menu-wrapper" style="width: 200px;">
    <div class="digital-logo">
      <div class="logo-img">
        <img src="../../assets/digital-logo.svg"/>
      </div>
      <div class="logo-text">
        <b>Admin</b>
      </div>
    </div>

    <div class="menu-list-wrapper" v-for="(menu, pIndex) in leftMenuList" :key="pIndex">
      <div class="lv1-wrapper" @click="clickLv1(menu)"
           :class="{'menu-selected': menu.routerName===lv1Selected}">
        <div class="menu-icon">
          <i :class="menu.icon"></i>
        </div>
        <div class="menu-text">{{ menu.label }}</div>
        <div class="arrow" v-if="menu.child&&menu.child.length>0">
          <i class="el-icon-arrow-up" v-if="menu.routerName===lv1Selected"></i>
          <i class="el-icon-arrow-down" v-else></i>
        </div>
      </div>
      <div class="lv2-wrapper" v-show="menu.routerName===lv1Selected && menu.child && menu.child.length>0">
        <div class="lv2-item level2"
             v-for="(lv2, index) in menu.child" :key="index"
             :class="{'menu-selected':lv2.routerName===lv2Selected}" @click="clickLv2(lv2)">
          <div class="icon">
            <i :class="lv2.icon"></i>
          </div>
          <div class="text">{{lv2.label}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {mapState} from 'vuex'

  export default {
    name: 'd-menu',
    data() {
      return {
        lv1Selected: '',
        lv2Selected: ''
      }
    },
    computed: {
      ...mapState({
        leftMenuList: state => {
          return state.menu.leftMenuList
        }
      })
    },
    watch: {
      $route(to, from) {
        this.chooseRefresh()
      }
    },
    mounted() {
      this.chooseRefresh()
    },
    methods: {
      clickLv1(val) {
        this.lv1Selected = val.routerName
        if (!val.child || val.child.length <= 0) { //没有子菜单，自己可以跳转
          this.$router.push({name: val.routerName})
          this.lv2Selected = '' //清空其他二级菜单选中状态
        }
      },
      clickLv2(val) {
        this.lv2Selected = val.routerName
        this.$router.push({name: val.routerName})
      },
      chooseRefresh() {
        this.lv1Selected = this.$route.matched[1].name
        if (this.$route.matched.length > 2) {
          this.lv2Selected = this.$route.matched[2].name
        }
      }
    }
  }
</script>

<style lang="stylus" type="text/stylus" scoped>
  @import "../../common/css/mixin.styl"
  .d-menu-wrapper
    bottom 0
    background-color #252a2f

    .digital-logo
      height 50px
      line-height 50px
      padding-left 5px
      transitionFunction(.3s)
      displayFlex()

      .logo-img
        img
          width: 40px
          height: 36px
          margin-top 7px

      .logo-text
        color #ffffff
        font-size 18px
        margin-left 10px

    .menu-list-wrapper
      color #d9d9d9

      .lv1-wrapper
        text-align center
        height 50px
        line-height 50px
        padding 0 15px
        font-size 14px
        cursor pointer
        user-select none
        animation slide-down .5s ease-in
        -webkit-animation slide-down .5s ease-in

        &:hover
          color #00b0d4
          background-color rgba(0, 0, 0, .25)
        displayFlex()

        .menu-icon
          margin-right 5px

        .menu-text
          padding 0 0 0 5px

        .arrow
          flex(1)
          text-align right !important

      .lv2-wrapper
        .lv2-item
          text-align center
          height 50px
          line-height 50px
          padding 0 20px
          font-size 14px
          cursor pointer
          user-select none
          animation slide-down .5s ease-in
          -webkit-animation slide-down .5s ease-in
          displayFlex()

          &:hover
            color #00b0d4
            background-color rgba(0, 0, 0, .25)

          .icon
            margin-right 10px

        .level2
          padding 0 10px 0 25px

          &.active
            color #00b0d4
            background-color rgba(0, 0, 0, .25)

  .menu-selected
    color #00b0d4
    background-color rgba(0, 0, 0, .25)
</style>
